<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>使用正则表达式验证注册页面</title>
	<link rel="stylesheet" href="css/register.css">
</head>

<body>
<section id="register">
	<div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
	<h1 class="hr_1">新用户注册</h1>
	<form action="" method="post" name="myform">
		<dl>
			<dt>用户名：</dt>
			<dd><input id="user" type="text" /><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></dd>
		</dl>
		<dl>
			<dt>密码：</dt>
			<dd><input id="pwd" type="password"  /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>
		</dl>
		<dl>
			<dt>确认密码：</dt>
			<dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd>
		</dl>
		<dl>
			<dt>电子邮箱：</dt>
			<dd><input id="email" type="text"/><div id="email_prompt"></div></dd>
		</dl>
		<dl>
			<dt>手机号码：</dt>
			<dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd>
		</dl>
		<dl>
			<dt>生日：</dt>
			<dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd>
		</dl>
		<dl>
			<dt>&nbsp;</dt>
			<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
		</dl>
  </form>
</section>

<script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
			$("#mobile").blur(function(){
				var phone = $(this).val();
				// 11位
				// \w  \d  {}  
				var reg = /^1[3|5|6|7|8|9]\d{9}$/;

				if(reg.test(phone) == false){
					$("#mobile_prompt").text("输入的手机号格式不正确，请重新输入");
				} else {
					$("#mobile_prompt").text("");
				}
			});
        })
    </script>
</body>
</html>
